<template>
  <div>
    <div :class="className" @click.stop="handleLink()">
      <!-- <template v-if="isShowMinus">
        <img src="../assets/icon_path_minus.svg" width="12" height="12" alt="icon_path_minus" />
      </template>
      <template v-else> -->
      <img
        src="../assets/icon_path_minus.svg"
        width="12"
        height="12"
        alt="icon_path_minus"
        v-if="open"
      />
      <img
        src="../assets/icon_path_plus.svg"
        width="12"
        height="12"
        alt="icon_path_plus"
        v-else
      />
      <!-- </template> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "link-circle",
  props: {
    dataItem: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    dataList() {
      return (
        this.$store.state.mind.nodeCards.filter(
          (v) => v.parent[v.parent.length - 1] === this.dataItem.id
        ) || []
      );
    },
    codeType() {
      return this.$store.state.mind.codeType;
    },
    isShowMinus() {
      return this.codeType === "2" &&
        [
          "card-sale-list",
          "card-complain-list",
          "card-out-stock-list",
        ].includes(this.dataItem.type)
        ? true
        : false;
    },
  },
  data() {
    return {
      open: false,
      className:
        "p-4 rounded-full cursor-pointer border-1 border-B6C0C9 hover:border-3d82ea w-fit",
    };
  },
  methods: {
    handleLink() {
      const dataItem = this.dataItem;
      // if (this.isShowMinus) {
      //   this.$set(dataItem, 'existNextNode', false)
      //   this.$emit('handleLink', { dataItem, open: false })
      //   return
      // }
      this.open = !this.open;
      const open = this.open;
      this.$emit("handleLink", { dataItem, open });
    },
  },
};
</script>
